<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { Ref } from "vue"
import PhoneCard from "../base/PhoneCard.vue";
import { ItemData } from "../../common/type/base";
import { getIPhoneList } from "../../common/api/index";

const navTitle = [{
    title: "苹果",
    id: 53,
}, {
    title: "华为",
    id: 52,
}, {
    title: "小米",
    id: 54,
}, {
    title: "OPPO",
    id: 55,
}, {
    title: "荣耀",
    id: 129,
}];


defineProps<{
    cardTitle?: String,
    btnTitle?: String,
    className?: String,
}>()

const dataList: ItemData[] = reactive([]);

const currenIndex: Ref<Number> = ref(0)
function getClass(index: number): string {
    return currenIndex.value === index ? "active" : "";
}
function changeIndex(index: number, id: number): void {
    if (currenIndex.value === index) return
    currenIndex.value = index;
    getData(id);
}

getData(navTitle[0].id);
function getData(cate_id: number) {
    getIPhoneList({
        cate_id,
        convey_type: 1,
        orderby_name: "id",
        sort: "desc",
        size: 1,
        pageSize: 6
    }).then(res => {
        dataList.splice(0);
        const data = res.data.data;
        dataList.push(...data);
    })
}
</script>
<template>
    <div class="android-card">
        <h2 class="title">
            {{ cardTitle }}
        </h2>
        <div class="nav">
            <div class="item f12" v-for="(ele, index) in navTitle" :class="getClass(index)"
                @click="changeIndex(index, ele.id)">
                {{ ele.title }}
            </div>
        </div>
        <div class="list">
            <div class="item" :btn-title="btnTitle" v-for="item in dataList" :key="item.id">
                <phone-card :price="item.min_price" :id="item.id" trendTitle="双十二" :class-name="className"
                    :img-path="item.imgurl" :maintitle="item.extension_title" min-title="首月一元" />
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.android-card {
    width: 720px;
    height: 900px;
    background-image: url("../../assets/images/default/activity_bg.jpg");
    background-size: cover;
    overflow: hidden;
    border-radius: 20px;
    border-bottom: 1px solid #FFA02F;

    .title {
        margin-top: 18px;
        text-align: center;
        font-size: 40px;
        color: white;
        letter-spacing: 7px;
    }

    .nav {
        display: flex;
        padding: 0 32px;
        margin-top: 60px;
        align-items: center;
        justify-content: space-around;
        height: 60px;

        .item {
            padding: 8px 18px;
            color: white;
            border-radius: 5px;
            overflow: hidden;
            letter-spacing: 2px;
            border: 1px solid white;
            transition: all .3s;

            &.active {
                font-size: 28px;
                font-weight: bold;
                border: 1px solid white;
                transform: scale(1.1);
            }
        }
    }

    .list {
        padding: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 20px;

        .item {
            width: 220px;
            border-radius: 16px;
            background-color: white;
            margin-right: 15px;
            margin-bottom: 15px;
            overflow: hidden;

            &:nth-of-type(3n) {
                margin-right: 0;
            }

        }
    }
}
</style>